<template>
  <div class="perfectPersonal">
    <template v-if="userType==1">
      <div class="input-item">
        <label>邮箱</label>
        <input type="text" name="email" @blur="verifyEmail(userInfo,'email')" v-model="userInfo.email" placeholder="请输入邮箱"/>
      </div>
      <div class="input-item">
        <label>月薪</label>
        <input type="number" name="monthly_salary" v-model="userInfo.monthly_salary" placeholder="请输入月薪"/>
      </div>
      <div class="input-item">
        <label>联系人姓名</label>
        <input type="text" name="other_person" v-model="userInfo.other_person" placeholder="请输入紧急联系人"/>
      </div>
      <div class="input-item">
        <label>联系人电话</label>
        <input type="number" name="other_phone" @blur="verifyPhone(userInfo,'other_phone')" v-model="userInfo.other_phone" placeholder="请输入紧急联系人电话"/>
      </div>
      <div class="input-item" @click="changeAddress('home')">
        <label>家庭地址</label>
          <div>
            <span>{{address1.province.name}}</span>
            <span>{{address1.city.name}}</span>
            <span>{{address1.area.name}}</span>
            <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
          </div>
      </div>
      <div class="input-item">
        <label>家庭详细地址</label>
        <input type="text" name="home_address" v-model="userInfo.home_address" placeholder="请输入家庭详细地址"/>
      </div>
      <div class="input-item">
        <label>公司名</label>
        <input type="text" name="company_name" v-model="userInfo.company_name" placeholder="请输入公司名"/>
      </div>
      <div class="input-item">
        <label>公司电话</label>
        <input type="number" name="company_phone" @blur="verifyPhone(userInfo,'company_phone')" v-model="userInfo.company_phone" placeholder="请输入公司电话"/>
      </div>
      <div class="input-item" @click="changeAddress('work')">
        <label>公司地址</label>
        <div>
          <span>{{address2.province.name}}</span>
          <span>{{address2.city.name}}</span>
          <span>{{address2.area.name}}</span>
          <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
        </div>
      </div>
      <div class="input-item">
        <label>公司详细地址</label>
        <input type="text" name="work_address" v-model="userInfo.work_address" placeholder="请输入公司详细地址"/>
      </div>
    </template>
    <template v-if="userType==2">
      <div class="input-item">
        <label>企业名</label>
        <input type="text" name="company_name" v-model="enterpriseInfo.company_name" placeholder="请输入企业名"/>
      </div>
      <div class="input-item">
        <label>社会统一编码</label>
        <input type="text" name="social_coding" v-model="enterpriseInfo.social_coding" placeholder="请输入社会统一编码"/>
      </div>
      <div class="input-item">
        <label>固定电话</label>
        <input type="text" name="fixed_phone" v-model="enterpriseInfo.fixed_phone" placeholder="请输入固定电话号码"/>
      </div>
      <div class="input-item">
        <label>对公账号</label>
        <input type="text" name="public_household" v-model="enterpriseInfo.public_household" placeholder="请输入对公账号"/>
      </div>
      <div class="input-item">
        <label>联系人姓名</label>
        <input type="text" name="contact_name" v-model="enterpriseInfo.contact_name" placeholder="请输入联系人姓名"/>
      </div>
      <div class="input-item">
        <label>联系人电话</label>
        <input type="text" name="contact_phone" @blur="verifyPhone(enterpriseInfo,'contact_phone')" v-model="enterpriseInfo.contact_phone" placeholder="请输入联系人电话号码"/>
      </div>
      <div class="input-item">
        <label>邮箱</label>
        <input type="text" name="email" @blur="verifyEmail(enterpriseInfo,'email')" v-model="enterpriseInfo.email" placeholder="请输入邮箱"/>
      </div>
      <div class="input-item" @click="changeAddress('company')">
        <label>公司地址</label>
        <div>
          <span>{{address1.province.name}}</span>
          <span>{{address1.city.name}}</span>
          <span>{{address1.area.name}}</span>
          <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
        </div>
      </div>
      <div class="input-item">
        <label>公司详细地址</label>
        <input type="text" name="company_address" v-model="enterpriseInfo.company_address" placeholder="请输入公司详细地址"/>
      </div>
    </template>
    <my-address  @getAddress="getAddress" :mystyle="style" v-if="isShowAddress" @closeAddress="closeAddress"></my-address>
    <button class="btn" :class="{'es':isSubmit}" :disabled="!isSubmit" @click="changeSave">下一步</button>
  </div>
</template>

<script>
  import CONFIG from './../../config'
  import {isMobile,isEmail} from "../../util";
  import address from './../common/Address'
  import {mapState} from 'vuex'
  import provinces from './../../util/provinces'
  export default {
      name: "PerfectPersonal",
      data(){
        return {
          isShowAddress:false,
          currentAddressType:'',
          provinces:provinces,
          style:'',
          address1:{
            province:{},
            city:{},
            area:{}
          },
          address2:{
            province:{},
            city:{},
            area:{}
          },
          userInfo:{
            email:'',
            other_person:'',
            other_phone:'',
            home_province:'',
            home_city:'',
            home_area:'',
            home_address:'',
            work_city:'',
            work_province:'',
            work_area:'',
            work_address:'',
            company_name:'',
            company_phone:'',
            monthly_salary:'',
          },
          enterpriseInfo: {
            company_name: '',
            social_coding: '',
            fixed_phone: '',
            public_household:'',
            contact_name:'',
            contact_phone:'',
            business_license:'',
            card_face:'',
            card_back:'',
            card_name:'',
            id_number:'',
            company_province:'',
            company_city:'',
            company_area:'',
            company_address:'',
            email:'',
          },
          userType:CONFIG.userType,
          type:'info'
        }
      },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.type = vm.$route.query.type || 'info';
        let title = vm.type === 'info' ? (vm.userType == 1 ? '填写个人信息' : '填写企业信息') : (vm.userType == 1  ? '修改个人信息' : '修改企业信息');
        vm.$store.dispatch('changeTitleAction',title);
        document.title =title;
      })
    },
    mounted(){
        this.type = this.$route.query.type || 'info';
      if(this.myUserInfo.id){
        this.handleInfo(JSON.parse(JSON.stringify(this.myUserInfo)))
      }else {
        this.$store.dispatch('getUserInfoAction').then((res)=>{
          this.handleInfo(res);
        })
      }
    },
    computed:{
      ...mapState({
        myUserInfo: state => state.user.userInfo,
        isHasInfoId: state => state.user.isHasInfoId,
      }),
      isSubmit(){
        if(this.userType == 1) {
          return this.userInfo.email && this.userInfo.monthly_salary && this.userInfo.other_person && this.userInfo.other_phone  && this.userInfo.company_phone && this.userInfo.company_name && this.userInfo.work_address && this.userInfo.work_area && this.userInfo.work_province && this.userInfo.work_city && this.userInfo.home_address && this.userInfo.home_area && this.userInfo.home_city && this.userInfo.home_province;
        }else {
          return this.enterpriseInfo.company_name && this.enterpriseInfo.social_coding  && this.enterpriseInfo.fixed_phone  && this.enterpriseInfo.public_household  && this.enterpriseInfo.contact_name  && this.enterpriseInfo.contact_phone   && this.enterpriseInfo.company_province   && this.enterpriseInfo.company_city   && this.enterpriseInfo.company_area   && this.enterpriseInfo.company_address && this.enterpriseInfo.email
        }
      }
    },
    components:{
      myAddress:address
    },
    methods:{
      closeAddress(){
        this.isShowAddress = false;
        setTimeout(()=>{
          this.style = 'transform: translateY(100%);';
        },0)
      },
      changeAddress(type){
        this.isShowAddress = true;
        setTimeout(()=>{
          this.style = 'transform: translateY(0);';
        },0);
        //只有个人的时候才需要判断
        if(type){
          this.currentAddressType = type;
        }
      },
      getAddress(address){
        if(this.userType == 2){
          this.address1 = address;
          this.enterpriseInfo.company_province = address.province.id;
          this.enterpriseInfo.company_city = address.city.id || address.city.name;
          this.enterpriseInfo.company_area = address.area.id;
        }else {
          if(this.currentAddressType==='work'){
            this.address2 = address;
            this.userInfo.work_province = address.province.id;
            this.userInfo.work_city = address.city.id || address.city.name;
            this.userInfo.work_area = address.area.id;
          }else {
            this.address1 = address;
            this.userInfo.home_province = address.province.id;
            this.userInfo.home_city = address.city.id || address.city.name;
            this.userInfo.home_area = address.area.id;
          }
        }
        this.isShowAddress = false;
      },
      handleInfo(info){
        if(this.userType == 2){
          this.enterpriseInfo = info;
          this.handleAddress(this.enterpriseInfo,'company',this.address1);
        }else {
          this.userInfo = info;
          this.handleAddress(this.userInfo,'home',this.address1);
          this.handleAddress(this.userInfo,'work',this.address2);
        }
      },

      handleAddress(info,type,obj){
        let provinceName = type+'_province';
        let cityName = type +'_city';
        let areaName = type+'_area';
        if(!info[provinceName]){
          return;
        }
        let province = this.provinces[Number(info[provinceName])-1+''];
        if(province){
          obj.province = province;
        }else {
          return;
        }
        if(!isNaN(Number(info[cityName]))){
          this.$api.getAreas({city_id:info[cityName]}).then((res)=>{
            let area =  res.data[Number(info[areaName])-1+''];
            if(area){
              obj.area = area;
            }
          })
        }
        this.$api.getAreas({city_id:info[provinceName]}).then((res)=>{
          if(isNaN(Number(info[cityName]))){
            let area2 = res.data[Number(info[areaName])-1+''];
            if(area2){
              obj.area =area2;
            }
            obj.city = {}
          }else {
            let city = res.data[Number(info[cityName])-1+''];
            if(city){
              obj.city = city;
            }
          }
        });
      },

      verifyPhone(obj,name) {
        //验证是否为手机号
        if (!isMobile(obj[name])) {
          this.$toast('手机号格式不正确')
          obj[name] = '';
        }
      },
      verifyEmail(obj,name) {
        //验证是否为邮箱
        if (!isEmail(obj[name])) {
          this.$toast('邮箱格式不正确')
          obj[name] = '';
        }
      },
      changeSave(){
        //有info_id说明已经补充过详细信息
        if(this.isHasInfoId){
            if(this.userType == 1){
              this.save('putUserInfo',this.userInfo);
            }else if(this.userType == 2){
              this.save('putEnterpriseInfo',this.enterpriseInfo);
            }
        }else {
          this.nextPage()
        }
      },
      save(methodName,obj){
        this.$indicator.open();
        this.$api[methodName](obj).then((res)=>{
          this.$indicator.close();
          this.$store.dispatch('getUserInfoAction');
          this.$toast('保存成功');
          if( this.type == 'change'){
            this.$router.push('/personal');
          }else {
            this.$router.push('/verified')
          }
        }).catch((err)=>{
          this.$indicator.close();
          this.$msg(err,this.$toast);
        })
      },
      nextPage(){
        //填写完，将用户信息完善之后，跳转到上传身份证页面
          if(this.userType ==1){
            this.goV('postUserInfo',this.userInfo)
          }else if(this.userType == 2){
            this.goV('postEnterpriseInfo',this.enterpriseInfo)
          }
      },
      goV(methodName,obj){
        this.$indicator.open();
        this.$api[methodName](obj).then((res)=>{
          this.$indicator.close();
          this.$store.dispatch('getUserInfoAction');
          this.$toast('保存成功');
          if(this.type === 'info'){
            this.$router.push('/verified')
          }else {
              this.$router.push('/personal');
          }
        }).catch((err)=>{
          this.$indicator.close();
          this.$msg(err,this.$toast);
        })
      }
    },
    }
</script>

<style lang="scss" scoped>
.perfectPersonal{
  width: 100%;
  height: 100%;
  padding: 0 30px;
  background: #fff;
  position: relative;
  .btn{
    position: absolute;
    left: 30px;
    bottom: 30px;
    background: #ddd;
    &.es{
      background:rgba(231,31,24,1);
    }
  }
  .input-item{
      height: 100px;
      border-bottom: 1px solid #F2F2F2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30px;
      line-height: 30px;
      background: #fff;
      label{
        color:rgba(153,153,153,1);
      }
      input{
        text-align: right;
        color: #333333;
        background: #fff;
        }
  }
}
</style>
